<template>
  <div class="num-btn fixed inset-x-0 bottom-2 z-50">
    <div
      class="mx-auto max-w-1200px px-4 py-3 overflow-x-auto bg-white/90 backdrop-blur border-t border-gray-200 shadow-lg"
    >
      <div class="flex items-center justify-center gap-3 min-w-max">
        <div v-for="(value, index) in num" :key="value">
          <!-- 点击滚动到对应编号的题目 -->
          <el-button
            round
            :type="answerList[index] ? 'primary' : 'default'"
            @click="$emit('toTopic', index)"
          >
            {{ value }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    //总共多少题
    num: number;
    //用户答案list
    answerList: string[];
  }>(),
  {
    num: 10,
    answerList: () => [],
  }
);
</script>
